import React from 'react';
import { Container } from '@/components/common/container';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Toolbar, ToolbarHeading, ToolbarActions } from '@/layouts/demo1/components/toolbar';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Plus, Edit, Trash2 } from 'lucide-react';

// 静态模拟SKU数据
const mockSkus = [
  { id: 'sku1', price: 8999, stock: 30, attributes: { 颜色: '黑色', 存储: '256GB' } },
  { id: 'sku2', price: 9299, stock: 20, attributes: { 颜色: '白色', 存储: '512GB' } },
];

const SkuManagementPage = () => {
  return (
    <Container>
      <Toolbar>
        <ToolbarHeading title="SKU管理" description="管理商品的所有SKU信息" />
        <ToolbarActions>
          <Button>
            <Plus className="size-4 me-2" />
            添加SKU
          </Button>
        </ToolbarActions>
      </Toolbar>
      <Card className="mt-6">
        <CardHeader>
          <CardTitle>SKU列表</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>SKU ID</TableHead>
                <TableHead>价格</TableHead>
                <TableHead>库存</TableHead>
                <TableHead>属性</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mockSkus.map((sku) => (
                <TableRow key={sku.id}>
                  <TableCell>{sku.id}</TableCell>
                  <TableCell>¥{sku.price}</TableCell>
                  <TableCell>{sku.stock}</TableCell>
                  <TableCell>
                    {Object.entries(sku.attributes).map(([k, v]) => `${k}:${v}`).join('，')}
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Button variant="ghost" size="sm">
                        <Edit className="size-4" />
                      </Button>
                      <Button variant="ghost" size="sm">
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </Container>
  );
};

export default SkuManagementPage; 